<template>
  <div>
    <div style="height:200px">
      首页
    </div>
    <el-button type="primary" @click="handleFilter">
      测试登录失效
    </el-button>
    <el-button type="primary" @click="getList">
      测试mock接口
    </el-button>
    <!-- <div class="test_color">
      测试主题色
    </div> -->
    <el-button type="primary" @click="showDialog">
      弹窗
    </el-button>
    <!-- 弹窗的宽度一定要用百分比 -->
    <ComDialog :dialog-config="dialogConfig">
      <template #dialogContent>
        <FormTpl
          ref="form"
          :label-width="labelWidth"
          :form-data="formData"
          :sel-options="setOptions"
          :render-list="renderList"
          :no-show-props="noShowProps"
        />
        <el-button type="primary" @click="handleClick">
          查看
        </el-button>
      </template>
    </ComDialog>
  </div>
</template>
<script>
import Demo from '@/services/demo';
export default {
  data() {
    return {
      dialogConfig: {
        title: '',
        show: false,
        width: '50%',
        data: {}
      },
      labelWidth: '120px',
      formData: {
        abc: [],
        d: []
      },
      renderList: [
        {
          type: 'cascader',
          placeholder: '级联选择器',
          prop: 'abc',
          label: '级联选择器'
        },
        {
          type: 'cascader',
          placeholder: '级联选择器',
          prop: 'd',
          label: '级联选择器'
        }
      ],
      setOptions: {
        abc: [
          { label: '一级选择', value: 1, children: [
            { label: '二级选择1', value: 2 },
            { label: '二级选择2', value: 12 },
            { label: '二级选择3', value: 112 }
          ] }
        ],
        d: [
          { label: '一级选择', value: 1, children: [
            { label: '二级选择1', value: 2 },
            { label: '二级选择2', value: 12 },
            { label: '二级选择3', value: 112 }
          ] }
        ]
      }
    }
  },
  computed: {
    noShowProps () {
      const props = []

      return props
    }
  },
  methods: {
    // mock登录失效
    handleFilter() {
      Demo.guoqi().then((res) => {
        console.log('mock', res);
      });
    },
    // 弹窗开启
    showDialog () {
      this.dialogConfig = {
        title: '标题内容',
        show: true,
        width: '50%',
        data: {}
      }
    },
    // 测试级联选择器
    handleClick () {
      console.log(this.formData)
    },
    // mock接口数据
    getList() {
      // 设置主题色
      // document.documentElement.style.setProperty('--color-theme', 'green');
      Demo.queryListInfo().then((res) => {
        console.log('mock', res);
      });
    }
  }
};
</script>

// <style lang="scss" scoped>
// .test_color{
//   width: 200px;
//   height: 200px;
//   background: var(--color-theme);
// }
// </style>

